<template>
	<view class="cxj-tab-layout" :hidden="!filterData.active" style="height: calc(100vh - 50px);">
	  <scroll-view scroll-y class="scroll" style="height: calc(100vh - 200px);">
	    <view class="cxj-tap-wrap">
	      <view>
	        <view>
	          <view class="title">{{filterData.filterName}}</view>
	          <view class="cxj-tap-main" v-if="filterData.filterName=='类别'">
	            <view class="navs" v-for="item in filterData.items" :class="searchParam.project==item.id? 'active' : ''">
	              <view @tap="clickFilterItem(filterData.filterName,item)">{{item.name}}</view>
	            </view>
	          </view>
			  <view class="cxj-tap-main" v-if="filterData.filterName=='颜色'">
			    <view class="navs" v-for="item in filterData.items" :class="searchParam.subject==item.id? 'active' : ''">
			      <view @tap="clickFilterItem(filterData.filterName,item)">{{item.name}}</view>
			    </view>
			  </view>
			  <view class="cxj-tap-main" v-if="filterData.filterName=='区域'">
			    <view class="navs" v-for="item in filterData.items" :class="searchParam.area==item.id? 'active' : ''">
			      <view @tap="clickFilterItem(filterData.filterName,item)">{{item.name}}</view>
			    </view>
			  </view>
			  <view class="cxj-tap-main" v-if="filterData.filterName=='年份'">
			    <view class="navs" v-for="item in filterData.years" :class="searchParam.year==item? 'active' : ''">
			      <view @tap="clickYear(item)">{{item}}</view>
			    </view>
				<view @click="moreYear" class="navs more-year">更多>></view>
			  </view>
	        </view>
	      </view>
	      <view class="select_btn">
	        <button class="clear" @tap="filterClears">清空条件</button>
	        <button class="submit" @tap="filterSubmit">确定</button>
	      </view>
	    </view>
	  </scroll-view>
	</view>
</template>

<script>
	export default {
		name:"popupFilter",
		props:{
			filterData:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				searchParam:{
					year:'',
					project:'',
					subject:'',
					area:''
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
		  
		},
		methods:{
			moreYear(){
				this.$emit('moreYear')
			},
			  // 点击导航按钮的条件
			  clickFilterItem(n,v) {
			     this.$emit('clickFilterItem',n,v)
				 if(this.filterData.filterName=='类别'){
				 	 this.searchParam.project = v.id
				 }else if(this.filterData.filterName=='颜色'){
					this.searchParam.subject =  v.id
				 }else if(this.filterData.filterName=='区域'){
					this.searchParam.area =  v.id
				 }else if(this.filterData.filterName=='年份'){
					this.searchParam.year = v
				 }
				
			  },
			 
			 clickYear(v) {
				this.$emit('clickYear',v)
			    this.searchParam.year = v
			  },
			  
			  // 清空条件
			  filterClears(e) {
				if(this.filterData.filterName=='类别'){
					this.searchParam.project = ''
				}else if(this.filterData.filterName=='颜色'){
					this.searchParam.subject = ''
				}else if(this.filterData.filterName=='区域'){
					this.searchParam.area = ''
				}else if(this.filterData.filterName=='年份'){
					this.searchParam.year = ''
				}
				
				this.$emit('filterClears',this.filterData.filterName)
			  },
			  // 确定按钮
			  filterSubmit() {
			    this.$emit('filterSubmit',this.searchParam)
			  }
		}
	}
</script>

<style scoped>
.cxj-tab-layout {
  width: 100%;
  overflow: hidden;
  z-index: 1009;
  /* height: 100%; */
  /* padding-top: 20rpx; */
  background-color: rgba(000,000,000,.5);
  position: fixed;
}
.hidden{
  background-color: rgba(000,000,000,.5);
  height: 100%;
  z-index: 9999;
  width: 100%;
}
.cxj-tab-layout  .navs.active { background: #FFE5D9 !important;}
 
.cxj-tap-wrap{
  padding: 20rpx 30rpx 0;
  background: #fff;
  padding-bottom: 40rpx
}
.cxj-tap-main{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.title{
  font-size: 32rpx;
  margin-bottom: 20rpx;
  color:#7F8BB4;
}
.scroll{
 /* height: calc(100vh - 110px); */
}
.cxj-tab-layout .navs {
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 300;
  background: #F3F3F3;
  border-radius: 6rpx;
  color: #333333;
  margin-bottom: 24rpx;
  flex: 0 0 31%;
}
.cxj-tap-main:after {
    content: ""; 
    width:31%;
}
 
/* 按钮 */
.select_btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.select_btn .clear{
    width: 31%;
    font-size: 30rpx;
    font-weight: 300;
    border: 1px solid #7F8BB4;
    border-radius: 6rpx;
    background-color: #fff;
    color: #7F8BB4;
    height: 88rpx;
    line-height: 88rpx;
    margin: 0;
}
.select_btn .submit{
    width: 66%;
    font-size: 30rpx;
    font-weight: 300;
    background-color: #7F8BB4;
    color: #fff;
    height: 88rpx;
    line-height: 88rpx;
    margin: 0;
}
.cxj-tab-layout .more-year{
	font-size: 28rpx;
	color:#7F8BB4;
}
</style>